<template>
  <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="数据库" prop="tableSchema">
          <el-input v-model="form.tableSchema" :disabled="form.tableId !== ''" placeholder="请输入数据库" />
        </el-form-item>
        <el-form-item label="表类型" prop="tableType">
          <el-select v-model="form.tableType" :disabled="form.tableId !== ''" filterable placeholder="请选择表类型">
            <el-option v-for="(value, key) in TAB_TYPE" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="表名" prop="tableName">
          <el-input v-model="form.tableName" :disabled="form.tableId !== ''" placeholder="请输入表名" />
        </el-form-item>
        <el-form-item label="表单名称" prop="tableComment">
          <el-input v-model="form.tableComment" placeholder="请输入表单名称" />
        </el-form-item>
        <el-form-item label="表定义" prop="tableDef">
          <el-select v-model="form.tableDef" :disabled="form.tableId !== ''" filterable placeholder="请选择表定义">
            <el-option v-for="(value, key) in TAB_DEF" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择主表" prop="parentId">
          <el-select v-model="form.parentId" :disabled="form.tableDef === Object.keys(TAB_DEF)[0] || form.tableId !== ''" filterable placeholder="请选择主表">
            <el-option v-for="item in primaryList" :key="item.tableId" :label="item.tableName" :value="item.tableId" />
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button v-if="resetText" @click="handleReset">{{resetText}}</el-button>
          <el-button v-if="cancelText" @click="handleCancel">{{cancelText}}</el-button>
          <el-button v-if="submitText" type="primary" :loading="btnLoading" @click="handleSubmit">{{submitText}}</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import enums from '@/views/workflow/utils/enum'
import { getInfoById, getPrimaryList, create } from '@/api/workflow/form/table'
export default {
  props: {
    tableId: {
      type: String,
      default: ''
    },
    resetText: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: ''
    },
    submitText: {
      type: String,
      default: ''
    }
  },
  data() {
    const validate = (rule, value, callback) => {
      if (this.form.tabDefined === 2) {
        callback(new Error('请选择主表'))
      } else {
        callback()
      }
    }
    return {
      form: {
        tableId: '',
        tableSchema: '',
        tableType: '',
        tableName: '',
        tableComment: '',
        tableDef: '',
        parentId: ''
      },
      rules: {
        tableSchema: [{ required: true, message: '请输入数据库', trigger: 'blur' }],
        tableType: [{ required: true, message: '请选择表类型', trigger: 'change' }],
        tableName: [{ required: true, message: '请输入表名', trigger: 'blur' }],
        tableComment: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
        tableDef: [{ required: true, message: '请选择表定义', trigger: 'change' }],
        parentId: [{ trigger: 'change', validator: validate }]
      },
      primaryList: [],
      btnLoading: false
    }
  },
  computed: {
    TAB_TYPE() {
      return enums.TAB_TYPE
    },
    TAB_DEF() {
      return enums.TAB_DEF
    }
  },
  watch: {
    tableId(val) {
      this.fetchData()
    },
    'form.tableDef': function(val) {
      this.form.parentId = val === 'PRIMARY' ? '' : this.form.parentId
    }
  },
  created() {
    if (this.tableId) {
      this.fetchData()
    }
    this.fetchPrimaryList()
  },
  methods: {
    fetchPrimaryList() {
      getPrimaryList().then(res => {
        this.primaryList = res.data
      })
    },
    fetchData() {
      getInfoById(this.tableId).then(res => {
        this.form = res.data
      })
    },
    resetForm() {
      if (this.tableId) {
        this.form.tableComment = ''
      } else {
        this.$refs['form'].resetFields()
      }
    },
    handleReset() {
      this.resetForm()
    },
    handleCancel() {
      this.resetForm()
      this.$emit('onCancel')
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.btnLoading = true
          const data = JSON.parse(JSON.stringify(this.form))
          // this.resetForm()
          this.$emit('onSubmit', data)
        }
      })
    }
  }
}
</script>
